<!--
 * @Author: liaoxing
 * @Date: 2021-08-18 09:41:39
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-29 10:02:15
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\FinanceBoard\Chart2.vue
-->
<template>
  <div class="relative">
    <div class='title' style='paddingTop: 22px;'>实际{{ type === 'cost' ? '投入' : '收入' }}</div>
    <div class="labelBox flex-align-center color-shallowBlue">
      <span class="font18">{{ allIncome }}元</span>
      <!-- <div class="flex-align-center"><span class="square"></span>计划{{ type === 'cost' ? '投入' : '收入' }}</div> -->
    </div>
    <div ref='charDom' style='width:100%;height:200px;padding: 0 20px'></div>
  </div>
</template>
<script>
const echarts = require('echarts')

export default {
  props: ['dataList', 'type'],
  components: {},
  data(){
    return {
      currentNav: '',
      color: ['#46e70b', '#ff690c', '#30ccfb', '#09c49a', '#ffa40c', '#f26f5e',  "#297af2", "#ffa916", "#15f1c6", "#4f32f3"],
      myChart: null,
      allIncome: 0
    }
  },
  watch: {
    dataList () {
      this.getOption()
    }
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    this.getOption()
  },
  methods: {
    getOption () {
      let num = 0
      let list = []
      this.dataList.forEach(e => {
        num += e.value
        if (e.value) {
          list.push(e)
        }
      })

      console.log(list)
      this.allIncome = this.util.twoFixed(num)
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          position: ['38%', '48.5%'],
          backgroundColor: 'rgba(50,50,50,0)',
          borderColor: 'none',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: '{b}<br />{c}'
        },
        legend: {
          type: 'scroll',
          top: '15%',
          // right: '20%',
          // left: '2%',
          icon: 'rect',
          itemWidth: 14,
          textStyle: {
            color: '#37d1df'
          },
          pageIconColor: '#fff',
          pageTextStyle: {
            color: '#fff'
          }
        },
        color: this.color,
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            left: '-10%',
            top: '30%',
            label: {
              color: '#fff',
              formatter: '{d}%',
              textBorderColor: 'none'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            // data: [
            //   { value: 1048, name: '技嘉收入' },
            //   { value: 735, name: '微星收入' },
            //   { value: 580, name: 'xxx收入' },
            //   { value: 484, name: 'xx收入' },
            //   { value: 300, name: '其他收入' }
            // ]
            data: list
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang='less'>
.title {
  font-size: 24px;
  font-weight: 400;
  color: #E9F2F9;
  text-align: center;
}
.labelBox{
  position: absolute;
  height: 10%;
  width: 100%;
  top: 66px;
  margin: 0;
  padding: 0 20px;
  justify-content: space-between;
  .square{
    height: 16px;
    width: 16px;
    background-color: #0c2f74;
    border: 1px solid white;
    margin-right: 10px;
  }
}
</style>
